<template>
    <div class="flex flex-col items-center justify-center relative">
        <div
            class="text-4xl p-4 text-left w-full my-4 DOUYU-Font cursor-default"
        >
            代码片段
        </div>
        <van-overlay
            z-index="100"
            class="flex flexitems-center justify-center Serif-Bolder"
            :show="code.show"
            v-if="code.snippet.title"
            @click.self="code.show = false"
        >
            <snippets-shower
                class="w-full"
                :code="code.snippet.body"
                :markdown="code.snippet.description"
                :codeLanguage="code.language"
                :title="code.snippet.title"
                :show="code.show"
                @close="code.show = false"
                @edit="editOldSnippet"
            ></snippets-shower>
        </van-overlay>

        <div class="w-4/5 flex flex-row items-center Serif-Bolder">
            <van-search
                class="searchBar flex-grow rounded-3xl shadow"
                v-model="search.text"
                placeholder="请输入搜索关键词"
                @search="searchInfo"
            />

            <div class="Icon Btn" @click="searchInfo">search</div>
        </div>
        <div
            class="
                searchResult
                flex flex-column
                items-center
                overflow-y-scroll
                w-full
                h-full
                flex-col
                Serif-Bolder
            "
        >
            <snippets-cell
                :snippet="snippet"
                v-for="snippet in searchResult"
                :key="snippet._id"
                @showCode="codeShowerTrigger"
            ></snippets-cell>
        </div>

        <van-overlay
            z-index="100"
            :show="editor.show"
            class="Overlay flex flex-col justify-center items-center"
            @click.self="editor.show = false"
        >
            <snippets-editor
                class="w-4/5 bg-white rounded-xl my-4"
                v-model="editor.snippet"
                @close="editor.show = false"
            ></snippets-editor>
        </van-overlay>
        <div
            class="
                Icon
                Btn
                absolute
                right-10
                bottom-10
                transform
                rotate-0
                hover:rotate-180
                transition
            "
            @click="addSnippet"
        >
            add
        </div>
    </div>
</template>

<script>
import snippetsEditor from "@/components/snippets-editor";

import { mapActions, mapState } from "vuex";
import SnippetsCell from "./snippetsCell.vue";
import createSnippet from "@/utils/snippets.js";
import snippetsShower from "./SnippetsShower.vue";
export default {
    components: {
        snippetsEditor,
        snippetsShower,
        SnippetsCell,
    },
    computed: {
        ...mapState({
            searchResult: (state) => state.snippets.SearchResult,
        }),
    },
    data() {
        return {
            code: {
                snippet: "",
                language: "",
                show: false,
            },
            editor: {
                show: false,
                snippet: createSnippet(),
            },
            search: {
                text: "",
            },
        };
    },
    methods: {
        ...mapActions(["searchSnippets"]),
        editOldSnippet() {
            this.editor.snippet = this.code.snippet;
            this.code.show = false;
            this.editor.show = true;
        },
        searchInfo() {
            this.searchSnippets(this.search);
        },

        codeShowerTrigger(snippet) {
            if (this.code.show) {
                this.code.show = false;
            } else {
                this.code.language = snippet.language;
                this.code.snippet = snippet;
                this.code.show = true;
            }
        },
        addSnippet() {
            this.editor.show = true;
            this.editor.snippet = createSnippet();
        },
    },
};
</script>

<style lang="less" scoped>
.el-input {
    background-color: transparent;
    border-radius: 10rem;
    /deep/ input {
        border-radius: 10rem;
        text-align: center;
    }
}
.search-cell {
    height: fit-content;
}
::-webkit-scrollbar {
    height: 0;
    width: 0;
}
.Btn {
    @apply text-3xl mx-2 w-10 h-10 bg-green-400 text-white flex justify-center items-center rounded-full shadow;
}
.searchResult {
    text-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) inset;
}
</style>
